/*
*  variables
*/
$md-drppicker-color: inherit !default;
$md-drppicker-bg-color: #fff !default;

$md-drppicker-cell-color: $md-drppicker-color !default;
$md-drppicker-cell-border-color: transparent !default;
$md-drppicker-cell-bg-color: $md-drppicker-bg-color !default;

$md-drppicker-cell-hover-color: $md-drppicker-color !default;
$md-drppicker-cell-hover-border-color: $md-drppicker-cell-border-color !default;
$md-drppicker-cell-hover-bg-color: #eee !default;

$md-drppicker-in-range-color: #000 !default;
$md-drppicker-in-range-border-color: transparent !default;
$md-drppicker-in-range-bg-color: #dde2e4 !default;

$md-drppicker-active-color: #fff !default;
$md-drppicker-active-bg-color: #3f51b5 !default;
$md-drppicker-active-border-color: transparent !default;

$md-drppicker-unselected-color: #999 !default;
$md-drppicker-unselected-border-color: transparent !default;
$md-drppicker-unselected-bg-color: #fff !default;

$md-drppicker-width: 278px !default;
$md-drppicker-width-double: auto !default;
$md-drppicker-border-color: #ccc !default;

$md-drppicker-calendar-margin: 4px !default;
$md-drppicker-calendar-bg-color: $md-drppicker-bg-color !default;

$md-drppicker-calendar-border-size: 1px !default;
$md-drppicker-calendar-border-color: $md-drppicker-bg-color !default;
$md-drppicker-calendar-border-radius: 4px !default;

$md-drppicker-cell-size: 20px !default;
$md-drppicker-cell-width: $md-drppicker-cell-size !default;
$md-drppicker-cell-height: $md-drppicker-cell-size !default;

$md-drppicker-cell-border-radius: $md-drppicker-calendar-border-radius !default;
$md-drppicker-cell-border-size: 1px !default;

$md-drppicker-control-height: 30px !default;
$md-drppicker-control-line-height: $md-drppicker-control-height !default;
$md-drppicker-control-color: #555 !default;

$md-drppicker-control-border-size: 1px !default;
$md-drppicker-control-border-color: #ccc !default;
$md-drppicker-control-border-radius: 4px !default;

$md-drppicker-control-active-border-size: 1px !default;
$md-drppicker-control-active-border-color: #08c !default;
$md-drppicker-control-active-border-radius: $md-drppicker-control-border-radius !default;

$md-drppicker-control-disabled-color: #ccc !default;
// Select
$select-border: 1px solid #f2f2f2 !default;
$select-background: rgba(255, 255, 255, 0.90) !default;
$select-padding: 5px !default;
$select-radius: 2px !default;
$input-height: 3rem !default;

/*
* styles
*/
.md-drppicker {
    position: absolute;
    font-family: Roboto, sans-serif;
    color: $md-drppicker-color;
    //background-color: $md-drppicker-bg-color;
    border-radius: 4px;
    width: $md-drppicker-width-double;
    padding: 4px;
    margin-top: -10px;
    overflow: hidden;
    z-index: 1000;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);

    &.double {
        width: $md-drppicker-width-double;
    }

    &.inline {
        position: relative;
        display: inline-block;
    }

    &:before,
    &:after {
        position: absolute;
        display: inline-block;

        border-bottom-color: rgba(0, 0, 0, 0.2);
        content: '';
    }



    &.openscenter {
        &:before {
            left: 0;
            right: 0;
            width: 0;
            margin-left: auto;
            margin-right: auto;
        }

        &:after {
            left: 0;
            right: 0;
            width: 0;
            margin-left: auto;
            margin-right: auto;
        }
    }

    &.single {

        .ranges,
        .calendar {
            float: none;
        }
    }

    &.shown {
        transform: scale(1);
        transition: all 0.1s ease-in-out;
        transform-origin: 0 0;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &.drops-up-left {
            transform-origin: 100% 100%;
        }

        &.drops-up-right {
            transform-origin: 0 100%;
        }

        &.drops-down-left {
            transform-origin: 100% 0;
        }

        &.drops-down-right {
            transform-origin: 0 0;
        }

        &.drops-down-center {
            transform-origin: 50%% 0;
        }

        &.drops-up-center {
            transform-origin: 50%% 100%;
        }

        .calendar {
            display: block;
        }
    }

    &.hidden {
        transition: all 0.1s ease;
        transform: scale(0);
        transform-origin: 0 0;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &.drops-up-left {
            transform-origin: 100% 100%;
        }

        &.drops-up-right {
            transform-origin: 0 100%;
        }

        &.drops-down-left {
            transform-origin: 100% 0;
        }

        &.drops-down-right {
            transform-origin: 0 0;
        }

        &.drops-down-center {
            transform-origin: 50% 0;
        }

        &.drops-up-center {
            transform-origin: 50% 100%;
        }

        .calendar {
            display: none;
        }
    }

    .calendar {
        /* display: none; */
        max-width: $md-drppicker-width - ($md-drppicker-calendar-margin * 2);
        margin: $md-drppicker-calendar-margin;

        &.single {
            .calendar-table {
                border: none;
            }
        }

        th,
        td {
            padding: 0;
            white-space: nowrap;
            text-align: center;
            min-width: 32px;

            span {
                pointer-events: none;
            }
        }
    }

    .calendar-table {
        border: $md-drppicker-calendar-border-size solid $md-drppicker-calendar-border-color;
        padding: $md-drppicker-calendar-margin;
        border-radius: $md-drppicker-calendar-border-radius;
        background-color: $md-drppicker-calendar-bg-color;
    }

    table {
        width: 100%;
        margin: 0;
    }

    th {
        color: #988c8c;
    }

    td,
    th {
        text-align: center;
        width: $md-drppicker-cell-width;
        height: $md-drppicker-cell-height;
        border-radius: $md-drppicker-cell-border-radius;
        border: $md-drppicker-cell-border-size solid $md-drppicker-cell-border-color;
        white-space: nowrap;
        cursor: pointer;
        height: 2em;
        width: 2em;

        &.available {
            &.prev {
                display: block;
                background-image: url("");
                background-repeat: no-repeat;
                background-size: .5em;
                background-position: center;
                opacity: .8;
                transition: background-color .2s ease;
                border-radius: 2em;

                &:hover {
                    margin: 0;
                }
            }

            &.next {
                transform: rotate(180deg);
                display: block;
                background-image: url("");
                background-repeat: no-repeat;
                background-size: .5em;
                background-position: center;
                opacity: .8;
                transition: background-color .2s ease;
                border-radius: 2em;

                &:hover {
                    margin: 0;
                    transform: rotate(180deg);
                }
            }

            &:hover {
                background-color: $md-drppicker-cell-hover-bg-color;
                border-color: $md-drppicker-cell-hover-border-color;
                color: $md-drppicker-cell-hover-color;
                background-repeat: no-repeat;
                background-size: .5em;
                background-position: center;
                margin: .25em 0;
                opacity: .8;
                /*transition: background-color .2s ease;*/
                border-radius: 2em;

                transform: scale(1);
                transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

            }
        }

        &.week {
            font-size: 80%;
            color: #ccc;
        }
    }

    td {
        margin: .25em 0;
        opacity: .8;
        transition: background-color .2s ease;
        border-radius: 2em;
        transform: scale(1);
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

        &.off {

            &,
            &.in-range,
            &.start-date,
            &.end-date {
                background-color: $md-drppicker-unselected-bg-color;
                border-color: $md-drppicker-unselected-border-color;
                color: $md-drppicker-unselected-color;
            }
        }

        //
        // Date Range
        &.in-range {
            background-color: $md-drppicker-in-range-bg-color;
            border-color: $md-drppicker-in-range-border-color;
            color: $md-drppicker-in-range-color;

            // TODO: Should this be static or should it be parameterized?
            border-radius: 0;
        }

        &.start-date {
            border-radius: 2em 0 0 2em;
        }

        &.end-date {
            border-radius: 0 2em 2em 0;
        }

        &.start-date.end-date {
            border-radius: $md-drppicker-cell-border-radius;
        }

        &.active {
            transition: background 300ms ease-out;
            background: rgba(0, 0, 0, 0.1);

            &,
            &:hover {
                background-color: $md-drppicker-active-bg-color;
                border-color: $md-drppicker-active-border-color;
                color: $md-drppicker-active-color;
            }
        }
    }

    th {
        &.month {
            width: auto;
        }
    }

    // disabled controls
    td,
    option {
        &.disabled {
            color: #999;
            cursor: not-allowed;
            text-decoration: line-through;
        }
    }

    .dropdowns {
        background-repeat: no-repeat;
        background-size: 10px;
        background-position-y: center;
        background-position-x: right;
        width: 50px;
        background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);

        select {
            display: inline-block;
            background-color: $select-background;
            width: 100%;
            padding: $select-padding;
            border: $select-border;
            border-radius: $select-radius;
            height: $input-height;

            &.monthselect,
            &.yearselect {
                font-size: 12px;
                padding: 1px;
                height: auto;
                margin: 0;
                cursor: default;
            }

            &.hourselect,
            &.minuteselect,
            &.secondselect,
            &.ampmselect {
                width: 50px;
                margin: 0 auto;
                background: #eee;
                border: 1px solid #eee;
                padding: 2px;
                outline: 0;
                font-size: 12px;
            }

            &.monthselect,
            &.yearselect {
                cursor: pointer;
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                margin: 0;
                padding: 0;
            }
        }
    }

    th.month>div {
        position: relative;
        display: inline-block;
    }

    .calendar-time {
        text-align: center;
        margin: 4px auto 0 auto;
        line-height: 30px;
        position: relative;

        .select {
            display: inline;

            mat-select {
                width: 46px;
            }
        }

        .time-label {
            display: inline-block;
            text-align: right;
            width: 40px;
        }
    }

    .input {
        display: inline;

        .input-item {
            display: inline-block;
            width: 44px;
            position: relative;
            font-family: inherit;
            background-color: transparent;
            text-align: center;
            padding: 5px;
            padding-bottom: 0px;
            font-size: 18px;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);

            &:focus {
                outline: none;
            }

            .input-label {
                color: rgba(0, 0, 0, 0.26);
                font-size: 16px;
                font-weight: normal;
                position: absolute;
                pointer-events: none;
                left: 0;
                top: 10px;
                transition: 0.2s ease all;
            }
        }
    }

    .calendar-time select.disabled {
        color: #ccc;
        cursor: not-allowed;
    }

    .label-input {
        border: $md-drppicker-control-border-size solid $md-drppicker-control-border-color;
        border-radius: $md-drppicker-control-border-radius;
        color: $md-drppicker-control-color;
        height: $md-drppicker-control-line-height;
        line-height: $md-drppicker-control-height;
        display: block;
        vertical-align: middle;
        margin: 0 auto 5px auto;
        padding: 0 0 0 28px;
        width: 100%;

        &.active {
            border: $md-drppicker-control-active-border-size solid $md-drppicker-control-active-border-color;
            border-radius: $md-drppicker-control-active-border-radius;
        }
    }

    .md-drppicker_input {
        position: relative;
        padding: 0 30px 0 0;

        i,
        svg {
            position: absolute;
            left: 8px;
            top: 8px;
        }
    }

    &.rtl {
        .label-input {
            padding-right: 28px;
            padding-left: 6px;
        }

        .md-drppicker_input i,
        .md-drppicker_input svg {
            left: auto;
            right: 8px;
        }
    }

    /* ranges */
    .show-ranges {
        .drp-calendar.left {
            border-left: 1px solid #ddd;
        }
    }

    .ranges {
        float: none;
        text-align: left;
        margin: 0;

        ul {
            list-style: none;
            margin: 0 auto;
            padding: 0;
            width: 100%;
            max-height: 430px;
            overflow-y: auto;
            border-left: 1px solid #e4e4e4;

            li {
                font-size: 12px;

                button {
                    padding: 0px 16px;
                    width: 100%;
                    background: none;
                    border: none;
                    text-align: left;
                    cursor: pointer;

                    &.active {
                        background-color: #009cbf;
                        color: #fff;
                    }

                    &[disabled] {
                        opacity: 0.3;
                    }

                    &:active {
                        background: transparent;
                    }
                }
            }

            li:hover {
                background-color: #eee;
            }

            &::-webkit-scrollbar {
                width: 5px;
                height: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background: #d6d6d6;
                border-radius: 10px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: #a6a6a6;
            }

            &::-webkit-scrollbar-track {
                background: #ffffff;
                border-radius: 5px;
                box-shadow: inset 7px 10px 12px #f0f0f0;
            }

            .slide-toggle {
                padding-top: 1rem;
                width: 200px;
                font-size: .8em !important;
            }

            .checkbox-container {
                display: flex;
                flex-direction: column;
            }

            .checkbox-filter {
                font-size: .8em !important;
            }
        }
    }

    .show-calendar {
        .ranges {
            margin-top: 8px;
        }
    }

    [hidden] {
        display: none;
    }

    /* button */
    .buttons {
        text-align: right;
        margin: 0 5px 5px 0;
    }

    .btn {
        position: relative;
        overflow: hidden;
        border-width: 0;
        outline: none;
        padding: 0px 6px;
        cursor: pointer;
        border-radius: 2px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        background-color: #3f51b5;
        color: #ecf0f1;
        transition: background-color .4s;
        height: auto;
        text-transform: uppercase;
        line-height: 36px;
        border: none;

        &:hover,
        &:focus {
            background-color: #3f51b5;
        }

        &>* {
            position: relative;
        }

        & span {
            display: block;
            padding: 12px 24px;
        }

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;

            display: block;
            width: 0;
            padding-top: 0;
            border-radius: 100%;
            background-color: rgba(236, 240, 241, .3);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        &:active {
            &:before {
                width: 120%;
                padding-top: 120%;
                transition: width .2s ease-out, padding-top .2s ease-out;
            }
        }

        &:disabled {
            opacity: 0.5;
        }

        &.btn-default {
            color: black;
            background-color: gainsboro;
        }
    }

    .clear {
        box-shadow: none;
        background-color: #ffffff !important;

        svg {
            color: #eb3232;
            fill: currentColor;
        }
    }
}

@media (min-width: 564px) {
    .md-drppicker {
        width: auto;

        &.single {
            .calendar.left {
                clear: none;
            }
        }

        &.ltr {
            direction: ltr;
            text-align: left;

            .calendar {
                &.left {
                    clear: left;
                    /*margin-right: 1.5em;*/

                    .calendar-table {
                        border-right: none;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }

                &.right {
                    margin-left: 0;

                    .calendar-table {
                        border-left: none;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
            }

            .left .md-drppicker_input {
                padding-right: 35px;
            }

            .right .md-drppicker_input {
                padding-right: 35px;
            }

            .calendar.left .calendar-table {
                padding-right: 12px;
            }

            .ranges,
            .calendar {
                float: left;
            }
        }

        &.rtl {
            direction: rtl;
            text-align: right;

            .calendar {
                &.left {
                    clear: right;
                    margin-left: 0;

                    .calendar-table {
                        border-left: none;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }

                &.right {
                    margin-right: 0;

                    .calendar-table {
                        border-right: none;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            }

            .left .md-drppicker_input {
                padding-left: 12px;
            }

            .calendar.left .calendar-table {
                padding-left: 12px;
            }

            .ranges,
            .calendar {
                text-align: right;
                float: right;
            }
        }
    }

    .drp-animate {
        transform: translate(0);
        transition: transform .2s ease,
            opacity .2s ease;

        &.drp-picker-site-this {
            transition-timing-function: linear;
        }

        &.drp-animate-right {
            transform: translateX(10%);
            opacity: 0;
        }

        &.drp-animate-left {
            transform: translateX(-10%);
            opacity: 0;
        }
    }
}

@media (min-width: 730px) {
    .md-drppicker {
        .ranges {
            width: auto;
        }

        &.ltr {
            .ranges {
                float: left;
            }
        }

        &.rtl {
            .ranges {
                float: right;
            }
        }

        .calendar.left {
            clear: none !important;
        }
    }
}

$fontSizeIcon: 24px;

.ngx-mat-timepicker-table
.ngx-mat-timepicker-tbody
tr
td {
    text-align: center;

    &.ngx-mat-timepicker-spacer {
        font-weight: bold;
    }

    .mat-input-element {
        color: black
    }

    .mat-form-field {
        width: 20px;
        max-width: 20px;
        text-align: center;
    }
}

// .md-drppicker {
//   .ranges {
//     ul {
//       list-style: none;
//       margin: 0 auto;
//       padding: 0;
//       width: 100%;
//       display: grid;
//       grid-template-columns: 1fr 1fr;

//       li {
//         button {
//           padding: 0.2rem 0.7rem !important;

//           &.active {
//             border-radius: 3px;
//             background-color: #009cbf !important;
//             color: #000 !important;
//           }
//         }
//       }
//     }
//   }

//   &.double {
//     &.drops-down-left {
//       &.ltr {
//         &.show-ranges {
//           &.shown {
//             top: 4.5rem !important;
//             left: auto !important;
//             right: 1rem !important;
//           }
//         }
//       }
//     }
//   }

//   .btn {
//     background-color: #009cbf !important;
//     color: #000 !important;
//   }
// }
